import { Card, Toast } from '@ant-design/react-native';
import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';
import a from '@ant-design/react-native/lib/modal/alert';

interface FamilyMemberCardProps {
    owner?: boolean;
    me?: boolean;
    addCard?: boolean;
    username?: string;
    onEditPress?: () => void;
}

export default function FamilyMemberCard({ addCard, me, owner, username, onEditPress }: FamilyMemberCardProps) {
    return (
        <View>
            <TouchableOpacity onPress={onEditPress}>
                <Card
                    style={[
                        styles.card,
                        { borderBottomWidth: addCard ? 0 : 1, borderBottomColor: '#eee' }
                    ]}
                >
                    <View style={styles.viewStyle}>
                        {!addCard ? (
                            <>
                                <View style={styles.avatar}>
                                    <FontAwesome
                                        name='user-o'
                                        size={28}
                                        color="#888"
                                        style={{ textAlign: 'center', textAlignVertical: 'center' }}
                                    />
                                </View>
                                {owner && me ? (
                                    <View style={styles.textContainer}>
                                        <Text style={styles.userName}>{username}（我）</Text>
                                        <Text style={styles.editText}>创建者</Text>
                                    </View>
                                ) : owner ? (
                                    <View style={styles.textContainer}>
                                        <Text style={styles.userName}>{username}</Text>
                                        <Text style={styles.editText}>创建者</Text>
                                    </View>
                                ) : me ? (
                                    <View style={styles.textContainer}>
                                        <Text style={styles.userName}>{username}（我）</Text>
                                        <Text style={styles.editText}>家庭成员</Text>
                                    </View>
                                ) : (
                                    <View style={styles.textContainer}>
                                        <Text style={styles.userName}>{username}</Text>
                                        <Text style={styles.editText}>家庭成员</Text>
                                    </View>
                                )}
                            </>
                        ) : (
                            <>
                                <View style={styles.avatar}>
                                    <FontAwesome
                                        name='plus'
                                        size={28}
                                        color="#888"
                                        style={{ textAlign: 'center', textAlignVertical: 'center' }}
                                    />
                                </View>
                                <View style={styles.textContainer}>
                                    <Text style={styles.userName}>邀请我的家人</Text>
                                </View>
                            </>
                        )}
                    </View>
                </Card>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    card: {
        width: 330,
        height: 70,
        overflow: 'hidden',
        elevation: 2,
        backgroundColor: '#fff',
        alignSelf: 'center',
        // borderRadius: 40,
        outlineWidth: 0,
        borderWidth: 0,
    },
    viewStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: 10,
        paddingLeft: 20,
    },
    avatar: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: '#eee',
        justifyContent: 'center',
        alignItems: 'center',
    },
    textContainer: {
        marginLeft: 16,
        justifyContent: 'center',
    },
    userName: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#000',
    },
    editText: {
        fontSize: 13,
        color: '#888',
        marginTop: 4,
    },
});


